<template>
  <div id="home">
    <nav-bar>
      <template v-slot:default>图书兄弟</template>
    </nav-bar>
    <tab-control v-show="isTabFixed" @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>

    <div class="wrapper">
      <div class="content">
        <!-- 轮播图+四个推荐书 -->
        <div ref="banref">
          <home-swiper :banners="banners"></home-swiper>
          <recommend-view :recommends="recommends"></recommend-view>
        </div>
        <tab-control @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
        <goods-list :goods="showGoods"></goods-list>
      </div>
    </div>
    <back-top v-show="isShowBackTop" @bTop="bTop"></back-top>
  </div>
</template>
<script>
  import HomeSwiper from './ChildComps/HomeSwiper';
  import NavBar from "components/common/navbar/NavBar"
  import RecommendView from './ChildComps/RecommendView'
  import TabControl from 'components/content/tabControl/TabControl'
  import GoodsList from 'components/content/goods/GoodsList'
  import BackTop from 'components/common/backtop/BackTop';
  import {
    getHomeAllData,
    getHomeGoods
  } from 'network/home'
  import {
    ref,
    reactive,
    onMounted,
    computed,
    watchEffect,
    nextTick
  } from 'vue'
  import BScroll from 'better-scroll'
  export default {
    name: "Home",
    setup() {
      let banref = ref(null);
      let isTabFixed = ref(false);
      let isShowBackTop = ref(false);
      const recommends = ref([]);
      let temid = ref(0)
      //商品列表数据据模型
      const goods = reactive({
        sales: {
          page: 1,
          list: []
        },
        new: {
          page: 1,
          list: []
        },
        recommend: {
          page: 1,
          list: []
        }
      })
      let currentType = ref('sales');
      const showGoods = computed(() => {
        return goods[currentType.value].list
      })

      let bscroll = reactive({})
      let banners = ref([])
      onMounted(() => {
        getHomeAllData().then(res => {
          recommends.value = res.goods.data
          banners.value = res.slides
        })
        getHomeGoods('sales').then(res => {
          goods.sales.list = res.goods.data
        })
        getHomeGoods('recommend').then(res => {
          goods.recommend.list = res.goods.data
        })
        getHomeGoods('new').then(res => {
          goods.new.list = res.goods.data
        })
        //创建BetterScroll对象
        bscroll = new BScroll(document.querySelector('.wrapper'), {
          probeType: 3, //0,1,2,3 3只要运动就触发scroll事件
          click: true, //是否允许点击触发事件
          pullUpLoad: true //上拉加载更多，默认是false
        });
        //触发滚动事件
        bscroll.on('scroll', (position) => {
          isShowBackTop.value = isTabFixed.value = (-position.y) > banref.value.offsetHeight
        })
        //上拉加载数据，触发pullingUp
        bscroll.on("pullingUp", () => {
          const page = goods[currentType.value].page;
          getHomeGoods(currentType.value, page).then(res => {
            goods[currentType.value].list.push(...res.goods.data)
            goods[currentType.value].page += 1;
          })
          //完成上拉，等数据加载完，把新数据展示出来
          bscroll.finishPullUp();
          //重新计算高度
          bscroll.refresh()
        })
      })
      const tabClick = (index) => {
        let types = ['sales', 'new', 'recommend'];
        currentType.value = types[index]
        nextTick(() => {
          //重新计算高度
          bscroll && bscroll.refresh();
        })
      }
      //监听 任何一个变量有变化就会触发
      watchEffect(() => {
        nextTick(() => {
          //重新计算高度
          bscroll && bscroll.refresh();
        })
      })
      const bTop = () => {
        bscroll.scrollTo(0, 0, 500)
      }
      return {
        recommends,
        tabClick,
        reactive,
        showGoods,
        isTabFixed,
        isShowBackTop,
        banref,
        bTop,
        banners
      }
    },
    components: {
      NavBar,
      RecommendView,
      TabControl,
      BackTop,
      GoodsList,
      HomeSwiper
    }
  }
</script>

<style scoped>
  #home {
    height: 100vh;
    position: relative;
  }

  .banners img {
    width: 100%;
    height: auto;
  }

  .wrapper {
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: hidden;
  }
</style>